(function (window) {
    //JSON
    const JsonPic = [
        {
            "class": "兴趣",
            "detail": "交互设计",
            "url": "waterfullpic00.gif"
        },
        {
            "class": "兴趣",
            "detail": "橙色系摄影",
            "url": "waterfullpic01.jpeg"
        },
        {
            "class": "兴趣",
            "detail": "伴娘服",
            "url": "waterfullpic02.jpeg"
        },
        {
            "class": "兴趣",
            "detail": "日式画",
            "url": "waterfullpic03.jpeg"
        },
        {
            "class": "画板",
            "detail": "「渐变海报Ⅰ」",
            "url": "waterfullpic04.jpeg"
        },
        {
            "class": "兴趣",
            "detail": "芭蕾",
            "url": "waterfullpic05.jpeg"
        },
        {
            "class": "兴趣",
            "detail": "智能穿戴",
            "url": "waterfullpic06.jpeg"
        },
        {
            "class": "兴趣",
            "detail": "狗",
            "url": "waterfullpic07.jpeg"
        },
        {
            "class": "画板",
            "detail": "葱包仔",
            "url": "waterfullpic08.gif"
        },
        {
            "class": "兴趣",
            "detail": "黏土",
            "url": "waterfullpic09.jpeg"
        },
        {
            "class": "兴趣",
            "detail": "面包",
            "url": "waterfullpic10.jpeg"
        },
        {
            "class": "兴趣",
            "detail": "早餐",
            "url": "waterfullpic11.jpeg"
        },
        {
            "class": "兴趣",
            "detail": "可乐",
            "url": "waterfullpic12.jpeg"
        },
        {
            "class": "兴趣",
            "detail": "星空手机壁纸",
            "url": "waterfullpic13.jpeg"
        },
        {
            "class": "兴趣",
            "detail": "工笔画",
            "url": "waterfullpic14.jpeg"
        },
        {
            "class": "兴趣",
            "detail": "icon",
            "url": "waterfullpic15.jpeg"
        },
        {
            "class": "画板",
            "detail": "【Product Design】",
            "url": "waterfullpic16.jpeg"
        },
        {
            "class": "画板",
            "detail": "喜爱的插画",
            "url": "waterfullpic17.jpeg"
        },
        {
            "class": "兴趣",
            "detail": "美食摄影",
            "url": "waterfullpic18.jpeg"
        },
        {
            "class": "画板",
            "detail": "〖文与碎语〗",
            "url": "waterfullpic19.jpeg"
        },
        {
            "class": "兴趣",
            "detail": "复古怀旧海报",
            "url": "waterfullpic20.jpeg"
        },
        {
            "class": "画板",
            "detail": "Graphic / LOGO ",
            "url": "waterfullpic21.jpeg"
        },
        {
            "class": "兴趣",
            "detail": "兔兔",
            "url": "waterfullpic22.jpeg"
        },
        {
            "class": "兴趣",
            "detail": "森林",
            "url": "waterfullpic23.jpeg"
        },
        {
            "class": "兴趣",
            "detail": "自行车",
            "url": "waterfullpic24.jpeg"
        },
        {
            "class": "兴趣",
            "detail": "可乐",
            "url": "waterfullpic25.jpeg"
        },
        {
            "class": "兴趣",
            "detail": "金鱼",
            "url": "waterfullpic26.jpeg"
        },
        {
            "class": "兴趣",
            "detail": "风铃",
            "url": "waterfullpic27.jpeg"
        },
        {
            "class": "画板",
            "detail": "002数位-web",
            "url": "waterfullpic28.jpeg"
        },
        {
            "class": "兴趣",
            "detail": "手捧花",
            "url": "waterfullpic29.jpeg"
        },
        {
            "class": "兴趣",
            "detail": "地中海风格家居",
            "url": "waterfullpic30.jpeg"
        },
        {
            "class": "画板",
            "detail": "双眼模糊",
            "url": "waterfullpic31.jpeg"
        },
        {
            "class": "兴趣",
            "detail": "动态摄影",
            "url": "waterfullpic32.jpeg"
        },
        {
            "class": "兴趣",
            "detail": "晚安图",
            "url": "waterfullpic33.jpeg"
        },
        {
            "class": "兴趣",
            "detail": "风景油画",
            "url": "waterfullpic34.jpeg"
        },
        {
            "class": "画板",
            "detail": "UI—天气APP",
            "url": "waterfullpic35.jpeg"
        },
        {
            "class": "兴趣",
            "detail": "那些好看的花砖",
            "url": "waterfullpic36.jpeg"
        },
        {
            "class": "兴趣",
            "detail": "双重曝光",
            "url": "waterfullpic37.jpeg"
        },
        {
            "class": "兴趣",
            "detail": "咖啡屋",
            "url": "waterfullpic38.jpeg"
        },
        {
            "class": "兴趣",
            "detail": "商业海报",
            "url": "waterfullpic39.jpeg"
        },
        {
            "class": "画板",
            "detail": "小伙伴",
            "url": "waterfullpic40.jpeg"
        },
        {
            "class": "画板",
            "detail": "「APP界面」",
            "url": "waterfullpic41.png"
        },
        {
            "class": "兴趣",
            "detail": "二次元",
            "url": "waterfullpic42.jpeg"
        },
        {
            "class": "画板",
            "detail": "谁家灶头无烟火",
            "url": "waterfullpic43.jpeg"
        },
        {
            "class": "人物",
            "detail": "辛集",
            "url": "waterfullpic44.jpeg"
        },
        {
            "class": "画板",
            "detail": "APP — 设计感",
            "url": "waterfullpic45.png"
        },
        {
            "class": "兴趣",
            "detail": "镇魂",
            "url": "waterfullpic46.gif"
        },
        {
            "class": "兴趣",
            "detail": "居老师⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄",
            "url": "waterfullpic47.jpeg"
        },
        {
            "class": "兴趣",
            "detail": "大暑",
            "url": "waterfullpic48.jpeg"
        },
        {
            "class": "画板",
            "detail": "岁月神偷",
            "url": "waterfullpic49.jpeg"
        },
        {
            "class": "人物",
            "detail": "___A",
            "url": "waterfullpic50.jpeg"
        },
        {
            "class": "画板",
            "detail": "(๑·́ ₃ ·̀๑) iPhone",
            "url": "waterfullpic51.jpeg"
        },
        {
            "class": "人物",
            "detail": "静风波",
            "url": "waterfullpic52.jpeg"
        },
        {
            "class": "兴趣",
            "detail": "巧克力",
            "url": "waterfullpic53.png"
        },
        {
            "class": "画板",
            "detail": "插画壁纸",
            "url": "waterfullpic54.jpeg"
        },
        {
            "class": "兴趣",
            "detail": "摩天轮",
            "url": "waterfullpic55.jpeg"
        },
        {
            "class": "兴趣",
            "detail": "牛奶",
            "url": "waterfullpic56.jpeg"
        },
        {
            "class": "画板",
            "detail": "【Little Tatoo.|",
            "url": "waterfullpic57.jpeg"
        },
        {
            "class": "兴趣",
            "detail": "餐桌",
            "url": "waterfullpic58.jpeg"
        },
        {
            "class": "兴趣",
            "detail": "猫",
            "url": "waterfullpic59.jpeg"
        }, {
            "class": "兴趣",
            "detail": "钢琴",
            "url": "waterfullpic60.jpeg"
        },
        {
            "class": "兴趣",
            "detail": "扁平化手机主题",
            "url": "waterfullpic61.png"
        },
        {
            "class": "兴趣",
            "detail": "移轴摄影",
            "url": "waterfullpic62.jpeg"
        },
        {
            "class": "画板",
            "detail": "那个叫Rokid的小家伙",
            "url": "waterfullpic63.png"
        },
        {
            "class": "兴趣",
            "detail": "Pink wedding",
            "url": "waterfullpic64.jpeg"
        },
        {
            "class": "画板",
            "detail": "◎ RECORD LIFE",
            "url": "waterfullpic65.jpeg"
        },
        {
            "class": "画板",
            "detail": "小7君日常",
            "url": "waterfullpic66.jpeg"
        },
        {
            "class": "画板",
            "detail": "【Swimming Pool.",
            "url": "waterfullpic67.jpeg"
        },
        {
            "class": "兴趣",
            "detail": "夏天的一抹凉心绿",
            "url": "waterfullpic68.jpeg"
        },
        {
            "class": "兴趣",
            "detail": "三伏天凉面吃起来",
            "url": "waterfullpic69.jpeg"
        },
        {
            "class": "兴趣",
            "detail": "唱片机",
            "url": "waterfullpic70.jpeg"
        },
        {
            "class": "画板",
            "detail": "404 Page",
            "url": "waterfullpic71.png"
        },
        {
            "class": "兴趣",
            "detail": "跑车",
            "url": "waterfullpic72.jpeg"
        },
        {
            "class": "兴趣",
            "detail": "玄关的故事",
            "url": "waterfullpic73.png"
        },
        {
            "class": "兴趣",
            "detail": "多肉手捧花",
            "url": "waterfullpic74.jpeg"
        }
    ];

    //1.滚动事件
    let nav = document.getElementById('nav');
    let ele = document.getElementById('elevator_item');
    let toTopBtn = ele.children[0];
    window.onscroll = function () {
        //1.1导航栏吸顶转换
        let header = document.getElementById('header_main');
        let headerHeight = header.offsetHeight;
        let changeNavNum = headerHeight / 3;
        let scrollTop = scroll().top;
        if (scrollTop >= changeNavNum) {
            nav.className = 'nav-down';
            toTopBtn.style.display = 'block';
        } else {
            nav.className = '';
            toTopBtn.style.display = 'none';
        }

        //1.2背景图移动
        if (scrollTop > headerHeight) {
            scrollTop = headerHeight;
        }
        //封面顶部距离 = 滚动高度 / 封面高度 * 往下偏移距离
        header.style.backgroundPositionY = scrollTop / headerHeight * 350 + 'px';
    };

    //2.横幅轮播
    let banner = document.getElementById('banner');
    let bannerList = banner.getElementsByTagName("li");

    //2.1轮播
    bannerAutoPlay(banner, bannerList);

    //3.横幅点击关闭
    let bannerCancel = document.getElementById('banner_cancel_button');
    bannerCancel.onclick = function () {
        banner.style.display = 'none';
    };

    //4.生成为你推荐的前15张图片
    let recommendList = document.getElementById('recommend_list');
    let ul = recommendList.children[0];
    let num = 0;//用num标记图片的张数
    //开始生成
    createRecommend(ul, 0, 20, JsonPic, num);
    num += 20;


    // 5.点击加载更多推荐
    let moreBtn = document.getElementById('btn_more');
    let picList = ul.children;
    let picListNum = picList.length;
    moreBtn.onclick = function () {
        setTimeout(function () {//截流
            if (num < JsonPic.length) {//判断num是否超出图片数据库长度
                createRecommend(ul, picListNum, picListNum + 20, JsonPic, num);
                num += 20;
                picListNum += 20;
            } else {
                moreBtn.innerText = '没有更多了';
                moreBtn.style.cursor = 'default';
            }
        }, 200)
    };

    //6.右边浮动
    //6.1回到顶部
    toTopBtn.onclick = function () {
        buffer(document, {'scrollTop': 0});
    };

    //6.2其他
    let helpBtn = ele.children[1];
    let plusBtn = ele.children[2];
    let helpBox = ele.children[3];
    let plusBox = ele.children[4];
    helpBtn.onmouseenter = function () {
        helpBox.style.display = 'inline-block';
    };
    plusBtn.onmouseenter = function () {
        plusBox.style.display = 'inline-block';
    };
    let timer = null;
    helpBtn.onmouseleave = function () {
        timer = setTimeout(function () {
            helpBox.style.display='';
        },200)
    };
    plusBtn.onmouseleave = function () {
        timer = setTimeout(function () {
            plusBox.style.display='';
        },200)
    };
    helpBox.onmouseenter = function () {
        clearTimeout(timer);
    };
    plusBox.onmouseenter = function () {
        clearTimeout(timer);
    };
    helpBox.onmouseleave = function () {
        // timer = setTimeout(function () {
            helpBox.style.display='';
        // },200)
    };
    plusBox.onmouseleave = function () {
        // timer = setTimeout(function () {
            plusBox.style.display='';
        // },200)
    };

    //7.注册、登录
    let loginBtn = document.getElementById('login_btn');
    let signInBtn = document.getElementById('sign_in_btn');
    let loginBox = document.getElementById('login_box');//登录注册页面，蒙版
    let sLoginBox = document.getElementById('login_b');//登录界面
    let sSigninBox = document.getElementById('sign_in_b');//注册界面
    let loginCBtn = document.getElementsByClassName('cancel-btn');//关闭按钮
    let signinToPhone = document.getElementById('sign_in_to_phone');
    let signinToAccount = document.getElementById('sign_in_to_account');
    let singninPhoneBox = document.getElementById('sign_in_phone');//注册界面：手机
    let singninAccountBox = document.getElementById('sign_in_account');//注册界面：社交账号
    //7.1登录按钮
    loginBtn.onclick = function () {
        loginBox.style.display = 'block';
        sLoginBox.style.display = 'block';
    };
    //7.2注册按钮
    signInBtn.onclick = function () {
        loginBox.style.display = 'block';
        sSigninBox.style.display = 'block';
    };
    //7.3关闭按钮
    for (let i = 0; i < loginCBtn.length; i++) {
        loginCBtn[i].onclick = function () {
            loginBox.style.display = 'none';
            sLoginBox.style.display = 'none';
            sSigninBox.style.display = 'none';
        }
    }
    //7.4注册界面：手机、账号注册转换
    signinToPhone.onclick = function () {
        singninPhoneBox.style.display = 'block';
        singninAccountBox.style.display = 'none';
    };
    signinToAccount.onclick = function () {
        singninPhoneBox.style.display = 'none';
        singninAccountBox.style.display = 'block';
    };
    //7.5登录、注册界面转换
    let toSignin = document.getElementById('to_signin');
    let toLogin = document.getElementById('to_login');

    toSignin.onclick = function () {
        sLoginBox.style.display = 'none';
        sSigninBox.style.display = 'block';
    };
    toLogin.onclick = function () {
        sLoginBox.style.display = 'block';
        sSigninBox.style.display = 'none';
    }
})(window);

/**
 * 横幅轮播
 * @param bannerName
 * @param bannerList
 */
function bannerAutoPlay(bannerName, bannerList) {
    // 1. 获取所有的li标签
    let num = 0;
    // 2. 开始定时器
    setInterval(function () {
        // 2.1 改变透明度
        for (let i = 0; i < bannerList.length; i++) {
            let singerLi = bannerList[i];
            buffer(singerLi, {opacity: 0}, null);
        }
        buffer(bannerList[num], {opacity: 1}, null);
        // 2.2 索引++
        num++;
        if (num >= bannerList.length) {
            num = 0;
        }
    }, 3000);
}

/**
 * 创建新的推荐图片DIV
 * @param father
 * @param json
 * @param num
 */
function write(father, json, num) {
    let newTagDiv = createNewTag('div');
    let newTagP = createNewTag('p');
    newTagP.innerText = `${json[num].class}`;
    let newTagA = createNewTag('a');
    newTagA.href = 'javascript:';
    newTagA.innerText = `${json[num].detail}`;
    newTagDiv.appendChild(newTagP);
    newTagDiv.appendChild(newTagA);
    father.appendChild(newTagDiv);
}

/**
 * 创建左右小箭头
 * @param father
 * @param string
 */
function writeSpan(father, string) {
    let newTagSpan = createNewTag('span');
    newTagSpan.className = string;
    father.appendChild(newTagSpan);
}

/**
 * 创建新标签
 * @param tagName
 * @returns {HTMLElement}
 */
function createNewTag(tagName) {
    return document.createElement(tagName);
}

/**
 * 创建20个“为您推荐”图片
 * @param {object}father
 * @param beginNum
 * @param targetNum
 * @param json
 * @param num
 */
function createRecommend(father, beginNum, targetNum, json, num) {
    for (let i = beginNum; i < targetNum; i++) {
        let newTagLi = createNewTag('li');
        let newTagA = createNewTag('a');
        newTagA.href = 'javascript:';
        let newTagImg = createNewTag('img');
        newTagA.appendChild(newTagImg);
        newTagLi.appendChild(newTagA);
        father.appendChild(newTagLi);
        (function (i) {
            if (parseInt(i / 4) % 2 === 0) {//奇数行
                if (i % 4 === 1) {
                    //出现信息的那个li
                    father.children[i].className = 'recommend-box';
                    write(father.children[i], json, num - 1);
                    write(father.children[i], json, num);
                    writeSpan(father.children[i], 'info-left');
                    writeSpan(father.children[i], 'info-right');
                    //后面的那个信息
                } else if (i % 4 === 3) {
                    father.children[i].className = 'little-box';
                    let newTagA = createNewTag('a');
                    newTagA.href = 'javascript:';
                    let newTagImg = createNewTag('img');
                    newTagImg.src = `images/pic/${json[num].url}`;
                    newTagA.appendChild(newTagImg);
                    father.children[i].appendChild(newTagA);
                    write(father.children[i], json, num);
                    num += 1;
                }
                else {
                    newTagImg.src = `images/pic/${json[num].url}`;
                    num += 1;
                }
            } else {//偶数行
                if (i % 4 === 2) {
                    //出现信息的那个li
                    father.children[i].className = 'recommend-box';
                    write(father.children[i], json, num - 1);
                    write(father.children[i], json, num);
                    writeSpan(father.children[i], 'info-left');
                    writeSpan(father.children[i], 'info-right');
                    //后面的那个信息
                } else if (i % 4 === 0) {
                    father.children[i].className = 'little-box';
                    let newTagA = createNewTag('a');
                    newTagA.href = 'javascript:';
                    let newTagImg = createNewTag('img');
                    newTagImg.src = `images/pic/${json[num].url}`;
                    newTagA.appendChild(newTagImg);
                    father.children[i].appendChild(newTagA);
                    write(father.children[i], json, num);
                    num += 1;
                }
                else {
                    newTagImg.src = `images/pic/${json[num].url}`;
                    num += 1;
                }
            }
        })(i);
    }
}